import { useCallback, useEffect, useState } from 'react';
import { Checkbox } from 'antd';
import { TextWidget } from '@inbiz/react';
import { useSearchUIDispatch } from '../../../../store/hooks/useSearchUIDispatch';
import { useSearchUIState } from '../../../../store/hooks/useSearchUIState';

// 文档搜索类型
export const SearchTypeLabel = ({ onChange }: { onChange?: (tag: number[]) => void }) => {
  const updateUIState = useSearchUIDispatch();
  const { selectShowTab, searchFolder, ecmSearchType } = useSearchUIState();
  const [selcetValue, setSelectValue] = useState<number[]>([]);

  // 默认选中非文件夹选项(只有文件夹例外选中文件夹)
  useEffect(() => {
    const list = selectShowTab?.searchType?.map((item) => item.value);
    let change: any = selectShowTab;
    if (change?.save) {
      setSelectValue(ecmSearchType || list?.filter((item) => item != 4) || [1, 2, 3]);
      return;
    }
    if (list?.length) {
      if (list.length === 1 && list[0] === 4) {
        setSelectValue(list);
      } else {
        setSelectValue(list.filter((item) => item != 4));
      }
    }
  }, [selectShowTab]);

  // 文档搜索类型变化
  const onTypeClick = useCallback((e) => {
    setSelectValue((prev: number[]) => {
      if (e.includes(4))
        if (prev.includes(4)) return e.filter((val: number) => val !== 4);
        else return [4];
      else if (!e.length) {
        return prev;
      } else return e;
    });
  }, []);

  // 文档模文件夹变更
  const onFolderChange = useCallback(
    (e: any) => {
      let newCheck: 'allFolder' | 'curfolder' = searchFolder || 'allFolder';
      if (e.length === 1 && e[0] !== newCheck) {
        newCheck = e[0];
      }
      if (e.length === 2) {
        newCheck = e[0] !== newCheck ? e[0] : e[1];
      }
      updateUIState({
        searchFolder: newCheck,
      });
    },
    [searchFolder],
  );

  // 更新UI中hook选中状态
  useEffect(() => {
    updateUIState({
      ecmSearchType: selcetValue,
    });
  }, [selcetValue, updateUIState]);

  return selectShowTab?.isDMS ? (
    <div className="document-search-type-checkbox">
      {selectShowTab?.searchType?.length ? (
        <div className="document-search-type-row">
          <Checkbox.Group value={selcetValue} onChange={onTypeClick}>
            {selectShowTab?.searchType
              ?.sort((a: any, b: any) => a.value - b.value)
              .map((item: any) => (
                <Checkbox key={item.value} value={item.value}>
                  <TextWidget>{item.label}</TextWidget>
                </Checkbox>
              ))}
          </Checkbox.Group>
        </div>
      ) : null}
      {(!selectShowTab.customRange || selectShowTab.customRange.length !== 1) && (
        <div className="document-search-type-row">
          <Checkbox.Group
            value={searchFolder ? [searchFolder] : ['allFolder']}
            onChange={onFolderChange}
          >
            <Checkbox value="allFolder" key="allFolder">
              <TextWidget>SearchEngine.fullLibrary</TextWidget>
            </Checkbox>
            <Checkbox value="curfolder" key="curfolder">
              <TextWidget>SearchEngine.currentFolder</TextWidget>
            </Checkbox>
          </Checkbox.Group>
        </div>
      )}
    </div>
  ) : null;
};
